import React from 'react';
import { Form, Input, Button, Select, notification } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useState, useEffect } from 'react'
import MyCarousel from '../components/MyCarousel';
import '../styles/register.scss'

// 导入轮播图插件
import { Carousel, Skeleton } from 'antd'
// 声明类型
interface Props{

}


function Register(prop:Props) {
  
    var navigate = useNavigate();
    //表单验证通过,执行
    const onFinish = (values: any) => {
    
        notification.success({ message: '注册成功!' });
        navigate('/login');//跳转登录页
    };

    return (
        <div className='register'>
            <div className='lbt'>
                <div className='left'>
                    {/* 轮播图组件 */}
                    <MyCarousel></MyCarousel>
                </div>
                <div className="form-box">
                    <Form
                        labelCol={{ span: 8}}
                        wrapperCol={{ span: 18 }}
                        onFinish={onFinish}
                    >
                        <h1>注册页</h1>
                        <Form.Item
                            label="公司名称"
                            name="name1"
                            rules={[{ required: true, message: '输入公司名称' }]}
                        >
                            <Input placeholder='输入输入公司名称' />
                        </Form.Item>

                        <Form.Item
                            label="姓名"
                            name="name"
                            rules={[{ required: true, message: '输入姓名' }]}
                        >
                            <Input placeholder='输入姓名' />
                        </Form.Item>

                        <Form.Item
                            label="手机号"
                            name="phone"
                            rules={[{ required: true, message: '输入手机号' }]}
                        >
                            <Input placeholder='输入手机号' />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: false, message: '输入密码' }]}
                        >
                            {/* <Input placeholder='输入密码' name="password" /> */}
                            <Input.Password />
                        </Form.Item>
                        <Form.Item
                            label="确认密码"
                            name="password1"
                            rules={[{ required: true, message: '输入确认密码' }]}
                        >
                            {/* <Input placeholder='输入确认密码' /> */}
                            <Input.Password />
                        </Form.Item>

                       
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">注册</Button>
                            <Button type="primary" htmlType="submit">登录</Button>
                        </Form.Item>

              
                      
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default Register;